<template>
  <header class="chat-aside-wrap">
    <h3>热点问题</h3>
    <ul>
      <li v-for="(item, ii) in problem" :key="ii" @click="send(item)">{{ item }}</li>
    </ul>
  </header>
</template>

<script setup lang="ts">
type Props = {
  problem: string[];
  sendLock: boolean;
}
defineProps<Props>();
const emits = defineEmits(["send"]);
const send = (sk: string) => {
  emits('send', sk);
}
</script>

<style lang="scss" scoped>
.chat-aside-wrap {
  width: 300px;
  height: 100%;
  background: #fff;
  border-left: 1px solid #efefef;
  padding: 30px 30px;
  h3 {
    font-size: 18px;
    color: #666;
    font-weight: 700;
    display: flex;
    align-items: center;
    &::before {
      content: "问";
      display: inline-block;
      width: 25px;
      height: 25px;
      background: var(--main-color);
      font-size: 14px;
      line-height: 25px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin-right: 5px;
    }
  }
  ul {
    margin-top: 15px;
    li {
      font-size: 14px;
      color: #666;
      line-height: 30px;
      cursor: pointer;
    }
  }
}
</style>